<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

    <head>
        <meta charset="utf-8" />
        <title>用户信息查询</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
        <meta content="" name="author" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <!-- App favicon -->
        <link rel="shortcut icon" href="../assets/images/favicon.ico" th:href="@{/assets/images/favicon.ico}">

        <!-- App css -->
        <link href="../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" th:href="@{/assets/css/bootstrap.min.css}" />
        <link href="../assets/css/jquery-ui.min.css" rel="stylesheet" th:href="@{/assets/css/jquery-ui.min.css}">
        <link href="../assets/css/icons.min.css" rel="stylesheet" type="text/css" th:href="@{/assets/css/icons.min.css}" />
        <link href="../assets/css/metisMenu.min.css" rel="stylesheet" type="text/css" th:href="@{/assets/css/metisMenu.min.css}"/>
        <link href="../assets/css/app.min.css" rel="stylesheet" type="text/css" th:href="@{/assets/css/app.min.css}"/>

    </head>

    <body>
        <div th:replace="~{common/top-nav::top-nav}"></div>
         <!-- Top Bar Start -->
        <div th:replace="~{common/left-side-nav::left-side-nav}"></div>
        <!-- end left-sidenav-->

        <div class="page-wrapper">
            <!-- Page Content-->
            <div class="page-content">

                <div class="container-fluid">
                    <!-- Page-Title -->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="page-title-box">
                                <div class="float-right">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="javascript:void(0);">办公自动化</a></li>
                                        <li class="breadcrumb-item"><a href="javascript:void(0);">用户管理</a></li>
                                        <li class="breadcrumb-item active">用户信息管理</li>
                                    </ol>
                                </div>
                                <h2 class="page-title">用户管理</h2>
                            </div><!--end page-title-box-->
                        </div><!--end col-->
                    </div>
                    <!-- end page title end breadcrumb -->
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <h3 class="mt-0 header-title">用户信息表</h3>
                                    <div class="table-responsive">
                                        <table class="table  table-bordered" id="makeEditable">
                                            <thead>
                                            <tr>
                                                <th>序号</th>
                                                <th>用户名</th>
                                                <th>昵称</th>
                                                <th>密码</th>
                                                <th>用户等级</th>
                                                <th name="buttons" class="float-left">编辑</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr th:each="user : ${page.list}">
                                                <td th:text="${userStat.count}"></td>
                                                <td th:text="${user.name}"></td>
                                                <td th:text="${user.nickName}"></td>
                                                <td th:text="${user.password}"></td>
                                                <td th:text="${user.role}"></td>
                                                <td name="buttons">
                                                    <div class=" pull-left">
                                                        <a th:href="@{/user/user_modify(id=${user.id},pageSize=${page.pageSize},pageNum=${page.pageNum},keyword=${param.keyword})}" class="mr-2">
                                                            <button id="bEdit" type="button" class="btn btn-sm btn-soft-success btn-circle mr-2" onclick="rowEdit(this);" style="">
                                                                <i class="dripicons-pencil"></i>
                                                            </button>
                                                        </a>
                                                        <a th:href="@{/user/user_remove(id=${user.id},pageSize=${page.pageSize},pageNum=${page.pageNum},keyword=${param.keyword})}">
                                                            <button id="bElim" type="button" class="btn btn-sm btn-soft-danger btn-circle removeBtn" onclick="rowElim(this);" style="">
                                                                <i class="dripicons-trash" aria-hidden="true"></i>
                                                            </button>
                                                        </a>

                                                    </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <span class="float-left">
                                        <button class="btn  btn-primary mb-3">提交</button>
                                    </span>
                                    <span class="float-right">
                                        <a th:href="@{/user/user_add}"><button id="but_add" class="btn btn-danger">添加用户信息</button></a>
                                    </span><!--end table-->
                                </div><!--end card-body-->
                            </div><!--end card-->
                        </div> <!-- end col -->
                    </div> <!-- end row -->

                    <!-- end row -->

                </div><!-- container -->

                <footer class="footer text-center text-sm-left">
                    &copy; 2022办公自动化 <span class="text-muted d-none d-sm-inline-block float-right"><i class="mdi mdi-heart text-danger"></i> 来自 <a href="#">4228</a></span>
                </footer><!--end footer-->
            </div>
            <!-- end page content -->
        </div>
        <!-- end page-wrapper -->




        <!-- jQuery  -->
        <script src="../assets/js/jquery.min.js" th:src="@{/assets/js/jquery.min.js}"></script>
        <script src="../assets/js/jquery-ui.min.js" th:src="@{/assets/js/jquery-ui.min.js}"></script>
        <script src="../assets/js/bootstrap.bundle.min.js" th:src="@{/assets/js/bootstrap.bundle.min.js}"></script>
        <script src="../assets/js/metismenu.min.js" th:src="@{/assets/js/metismenu.min.js}"></script>
        <script src="../assets/js/waves.js" th:src="@{/assets/js/waves.js}"></script>
        <script src="../assets/js/feather.min.js" th:src="@{/assets/js/feather.min.js}"></script>
        <script src="../assets/js/jquery.slimscroll.min.js" th:src="@{/assets/js/jquery.slimscroll.min.js}"></script>

        <script src="../../plugins/tiny-editable/mindmup-editabletable.js" th:src="@{/../plugins/tiny-editable/mindmup-editabletable.js}"></script>
        <script src="../../plugins/tiny-editable/numeric-input-example.js" th:src="@{/../plugins/tiny-editable/numeric-input-example.js}"></script>
        <script src="../../plugins/bootable/bootstable.js" th:src="@{/../plugins/bootable/bootstable.js}"></script>
        <script src="../assets/pages/jquery.tabledit.init.js" th:src="@{/assets/pages/jquery.tabledit.init.js}"></script>

        <!-- App js -->
        <script src="../assets/js/app.js" th:src="@{/assets/js/app.js}"></script>


    <script>
        // 为清除按钮注册事件
        $('#clearBtn').click(function (event){
            // 通过this对象，获得到当前选择的值
            var pageSize = $('#page-size-select').val();
            // 向服务器发送请求
            window.location = '/product/produce_list?pageNum=1&pageSize=' + pageSize;
        })

        // 为删除按钮注册单击事件
        $('.removeBtn').click(function (event){
            // 如果在<a> 上的单击事件处理器函数返回false，就会进<a>的默认行为
            return confirm('是否要删除？');
        })
    </script>
    </body>

</html>